<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        html,body {
            padding: 0px;
            margin: 0px;
            overflow: hidden;
            background: #252e3c;

        }

        div#subwayMap {
            width: 600px;
            height: auto;
        }
        div#highLight{
            position:fixed;
            top:30px;
            height:100%;
            width:100%;
            background-color:#ffffff;
            filter:Alpha(Opacity=60);
            opacity:0.6;
            z-index: 10;
        }
    </style>

    <script type="text/javascript" src="subwayUtil/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="subwayUtil/kinetic-v5.1.0.js"></script>
    <script type="text/javascript" src="subwayUtil/org.gridsofts.jslib.js"></script>
    <script type="text/javascript" src="subwayUtil/jquery-jsonutil.js"></script>
    <script type="text/javascript" src="subwayUtil/map2.js"></script>
    <script type="text/javascript" src="subwayUtil/Subwaymap.js"></script>
    <script type="text/javascript" src="subwayUtil/layers/IconLayer.js"></script>
    <script type="text/javascript" src="subwayUtil/layers/LineLayer.js"></script>
    <script type="text/javascript" src="subwayUtil/layers/StationLayer.js"></script>
    <script type="text/javascript" src="subwayUtil/layers/StationLljkLayer.js"></script>
    <script type="text/javascript" src="subwayUtil/layers/HighLightLineLayer.js"></script>
    <script type="text/javascript" src="subwayUtil/layers/QipaoLayer.js"></script>
    <script type="text/javascript" src="subwayUtil/components/Station.js"></script>
    <script type="text/javascript" src="subwayUtil/components/StationName.js"></script>
    <script type="text/javascript" src="subwayUtil/components/StationCode.js"></script>
    <script type="text/javascript" src="subwayUtil/components/QipaoStation.js"></script>
</head>
<body>
<div style="height: 30px;">
    <button id="btn_lljk">流量监控</button>
    <button id="btn_highLight">高亮</button>
</div>
    <div id="subwayMap"></div>
    <div id="highLight" style="display: none"></div>

    <script type="text/javascript">
        var subwayMap = new Subwaymap({
            containerId: "subwayMap",
            mapJson: mapJson,
            qipaoJson:qipaoJson,
            type:"init_load"
        });
        var width=$(window).width();
        var height=$(window).height()
        subwayMap.updateUI(width, height);
        $(document).ready(function(){
            $("#highLight").on("click",function(){
                $("#highLight").hide();
            });

            $("#btn_lljk").on("click",function(){
                Subwaymap.actualWidth=0;Subwaymap.actualHeight=0;Subwaymap.minWidth=0;Subwaymap.minHeight=0;
                subwayMap = new Subwaymap({
                    containerId: "subwayMap",
                    mapJson: mapJson,
                    type:"lljk_load",
                    lljk:lljk,
                });
                var width=$(window).width();
                var height=$(window).height();
                subwayMap.updateUI(width, height);

            });
            $("#btn_highLight").on("click",function(){
                Subwaymap.actualWidth=0;Subwaymap.actualHeight=0;Subwaymap.minWidth=0;Subwaymap.minHeight=0;
                subwayMap = new Subwaymap({
                    containerId: "subwayMap",
                    mapJson: mapJson,
                    type:"init_load",
                    highLightJson:highLightJson,
                    type:"highLight_load",
                    id:"highLight"
                });


              //  Subwaymap.actualWidth=0;Subwaymap.actualHeight=0;Subwaymap.minWidth=0;Subwaymap.minHeight=0;
             /*   $("#highLight").show();
                subwayMap = new Subwaymap({
                    containerId: "highLight",
                //    mapJson: mapJson,
                    highLightJson:highLightJson,
                    type:"highLight_load",
                });*/
                var width=$(window).width();
                var height=$(window).height();
                subwayMap.updateUI(width, height);


            });

        });

        // jquery 兼容的滚轮事件
        $(document).on("mousewheel DOMMouseScroll", function (e) {
           subwayMap.zoomViaMouseWheel(e);
        });
        //当浏览器窗口大小改变时，设置显示内容的高度
        $(window).resize(function() {
            var width=$(window).width();
            var height=$(window).height();
            subwayMap.moveToCenter(width,height);
        });

    </script>
    
</body>
</html>